<template>
	<div>
		<div class="m_head">			
			<a class="prevbtn" @click.prevent="back">	
				<span class="prev rotate45"></span>
				<span class="prev1 rotate135"></span>
			</a>
			<h1 class="navtext">注册</h1>
		</div>
		<div class="form-box row">
			<div id="regForm">
				<div class="form-group">
					<label>账号</label>
					<input v-model="mobile" ref="phone" type="text" class="userName " placeholder="请输入账户名或者手机号" @keyup="show($event)" @keydown="show($event)"/>
				</div>
				<div ref="phoneErro" class="error"></div>
				<!--<div class="form-group">
					<label>邮箱</label>
					<input ref="email" type="text" class="email" placeholder="请输入邮箱" @keyup="show($event)" @keydown="show($event)"/>
				</div>-->
				<div ref="emailErro" class="error"></div>
				<div class="form-group">
					<label>密码</label>
					<input v-model="pwd" ref="pwd" type="password" class="password" placeholder="请输入密码" @keyup="show($event)" @keydown="show($event)"/>
				</div>
				<div ref="pwdErro" class="error"></div>
				<!--<div class="form-group">
					<label>确认密码</label>
					<input ref="cpwd" type="password" class="cpassword" placeholder="请输入确认密码" @keyup="show($event)" @keydown="show($event)"/>
				</div>
				<div  ref="cpwdErro" class="error"></div>-->

				<div class="form-group groupRelactive">
					<input v-model="vcode" ref="vcode" type="text" class="validecodeInput" placeholder="请输入验证码" @keyup="show($event)" @keydown="show($event)"/>
					<button class="validPhoneCode" v-bind:class="{gray:waitTime>0}" @click="getCode" >{{getCodeText()}}</button>
				</div>
				
				<div ref="vcodeErro" class="error" v-show="!showCerror"></div>
				<div class="form-group">
					<button ref="regbtn" class="regbtn formActionBtn" @click="reigsterAction" >注册</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../../api/api.js'
	import { Toast } from 'mint-ui'
	import local from '../../local/local.js'
	var verifiedBy =false;
	var nums = 30;
	var clock = '';
	export default{	
//		props = ["wait_timer"],
		data(){
			return {
				waitTime:false,
				mobile:'',
				pwd:'',
				vcode:'',
				showCerror:true
			}
		},
		methods:{
			back(){
				this.$router.go(-1);//返回上一层
			},
			reigsterAction(){		
				if(!verifiedBy){
					Toast({
       				 	message: '请检查错误!',
        				position: 'center',
        				duration: 2000
     				});
     				return false;
				}
				var params = {'user_name':this.mobile,'user_password':this.pwd,'identify_code':this.vcode};
				api.register.register(params).then((res)=>{
					console.log(res);
					Toast({
       				 	message: res.msg,
        				position: 'center',
        				duration: 2000
     				});
					if(res.ret == 200){
						local.setUserInfo(res.data);
						this.mobile ='';
						this.pwd ='';
						this.vcode = '';
						this.$router.go(-1);
					}
				});
			
			},
			getCode(){	
				if (this.waitTime > 0) {
                	return false;
            	}
				var pval = this.mobile.trim();
				if (!this.mobile) {
                	Toast({
       				 	message: '手机号不能为空或格式错',
        				position: 'center',
        				duration: 2000
     				});
     				return false;
          		}							
			let param = {'phone':this.mobile};
			api.register.getCode(param).then((res)=>{
				console.log(res);
				if(res.ret == 200){
					console.log(this.vcode + this.phonecode(this.vcode));
					this.vcode = res.data.code;
					this.setErrors([this.phone(this.mobile),this.password(this.pwd),this.phonecode(this.vcode)],[this.$refs.phoneErro,this.$refs.pwdErro,this.$refs.vcodeErro]);			
					this.showCerror = false;
			
					this.waitTime = 5;
            		var that = this;
            		var timer_interval = setInterval(function(){
                		if(that.waitTime > 0){
                    	that.waitTime -- ;
                		}else{
                    		clearInterval(timer_interval);
                		}
            		},1000);	
				}
				else{
					this.waitTime = 0;
					this.showCerror = true;
					this.vcode = "";
				}
			})							
			},
			getCodeText(){
				if(this.waitTime > 0){
                	return this.waitTime+'s后获取';
            	}
            
            	if(this.waitTime === 0){
                	return '重新获取';
            	}
            
            	if(this.waitTime === false){
                	return '获取验证码';
            	}
			},
			show(e){				
				this.setErrors([this.phone(this.mobile),this.password(this.pwd),this.phonecode(this.vcode)],[this.$refs.phoneErro,this.$refs.pwdErro,this.$refs.vcodeErro]);			
			},
			setErrors(txts,errors){
				verifiedBy = true;				
				for(var i =0;i<txts.length;i++){					
					if (txts[i].length >0){
		 				errors[i].style.display = "block";
		 				errors[i].innerText = txts[i];	
		 				verifiedBy = false;
			 		}
		 			else {		 				
		 				errors[i].style.display = "none";
		 				errors[i].innerText = "";
		 			}		 		
				}
			}
			
		}
	}
</script>

<style lang="css" scoped>
.validPhoneCode.gray{background: #EFEFEF;color:#999}
.form-box{margin-top: 1rem;padding-top: .5rem; overflow: hidden;width: 100%;}
.form-group{border-radius:.08rem;border: .02rem solid #F0F0F0; width: 5rem;background: #FFFFFF;margin: 0 auto;height: .68rem;margin-bottom: .2rem;}
.form-group>label{vertical-align: top;color: #000;font-size: .18rem;width: .8rem;height: .4rem;line-height: .6rem;margin-left: .2rem;display: inline-block;margin-bottom: .3rem;}
.form-group>input{width: 60%;font-size: .18rem;height: .6rem;margin-left: .03rem;border: none;padding: .02rem;}
.regbtn{text-align: center;width: 100%;height: 100%;background: #ff5000;font-size: .25rem;color: #ffffff;} 
.formActionBtn{text-align: center;}
.disableBtn{background: rgba(122,123,33,0.5);}
.error{display: none; color: #FF0000;font-size: .2rem;height: .3rem;line-height: .3rem;margin-left: 1.4rem;margin-bottom: .1rem;width: 70%;}
.groupRelactive{position: relative;}
.inputBorder{border-color:#EC971F;}
.validPhoneCode{width: 1.2rem;height: .5rem;background-color: #EC971F;color: #F0F0F0;position: absolute;right: .1rem;top:0.05rem;font-size: .15rem;}
</style>